<!--
*
* Copyright 2015 HISP Tanzania
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
* MA 02110-1301, USA.
*
* @since 2015
* @author Joseph Chingalo profschingalo@gmail.com>
*
*
-->
<ion-header>

  <ion-navbar [color]="(colorSettings$ |async).colorAttributes.main">
    <ion-title>
      <span [translate]="'Registration'"></span>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-grid>
    <div *ngIf="isLoading">
      <loading [loadingMessage]="loadingMessage" [loadingSize]="'large'"></loading>
    </div>
    <div *ngIf="!isLoading">
      <ion-row>
        <ion-col>

          <div (tap)="goBack()" padding-bottom class="item-card">
            <b>
              <span [translate]="'Organisation unit'"></span>
            </b> : {{ currentOrganisationUnit.name }}
            <br>
            <b>
              <span [translate]="'Program'"></span>
            </b> : {{ currentProgram.name }}
            <br>
          </div>
          <div class="item-car-tracker-details-sections" no-padding (click)="openWidgetList()">
            <ion-item no-padding>
              <div ion-text color="font-color" align="center">
                <div style="padding:6px 0px;">
                  <span>
                    <span class="program-stage-button-label">
                      <span *ngIf="currentWidget.icon">
                        <img class="tracker-pagination-icon" [src]="currentWidget.icon" />
                      </span>
                      <span *ngIf="currentWidget.iconName" class="tracker-pagination-icon icon-color">
                        <b>{{ currentWidget.iconName }}</b>
                      </span>
                    </span>
                  </span>
                  &nbsp; {{ currentWidget.name|translate }}
                </div>
              </div>
              <div style="text-align: center" item-right float-right>
                <span float-end class="side-menu-icon">
                  <img [src]="icons.menu">
                </span>
              </div>
            </ion-item>
          </div>
        </ion-col>
      </ion-row>

      <div *ngFor="let widget of dashboardWidgets;trackBy: trackByFn">
        <div *ngIf="(isDashboardWidgetOpen[widget.id])">
          <ion-row>
            <ion-col>
              <div *ngIf="currentWidget.id == 'enrollment'">
                <form>
                  <div class="item-card">
                    <div class="inputLabel">
                      <b>
                        <div class="inputLabel">
                          <span [translate]="'Enrollments'"></span>
                        </div>
                      </b>
                      <hr>
                    </div>
                    <div>
                      <div class="inputLabel">
                        {{ currentProgram.enrollmentDateLabel}}
                        <span class="required">&nbsp;*</span>
                      </div>
                      <div [ngClass]="(isTrackedEntityRegistered)? 'input-field-container-success' : 'input-field-container'">
                        <data-time-input [(inputValue)]="date['enrollmentDate']" (dateTimeUpdateAction)="updateDateSelection($event,'enrollmentDate')"
                          [mode]="'date'"></data-time-input>
                      </div>
                      <div *ngIf="currentProgram && currentProgram.displayIncidentDate">
                        <div class="inputLabel">
                          {{ currentProgram.incidentDateLabel}}
                          <span class="required">&nbsp;*</span>
                        </div>
                        <div [ngClass]="(isTrackedEntityRegistered)? 'input-field-container-success' : 'input-field-container'">
                          <data-time-input [(inputValue)]="date['incidentDate']" (dateTimeUpdateAction)="updateDateSelection($event,'incidentDate')"
                            [mode]="'date'"></data-time-input>
                        </div>
                      </div>
                    </div>
                    <div *ngIf="currentProgram.captureCoordinates && isFormReady">
                      <span [translate]="'Coordinate'"></span>
                      <div [ngClass]="(isTrackedEntityRegistered)? 'input-field-container-success' : 'input-field-container'">
                        <event-coordinate-selector (onChangeEventCoordonate)="updateEventCoordonate($event)"
                          [coordinate]="coordinate"></event-coordinate-selector>
                      </div>
                    </div>
                  </div>
                </form>

                <div class="item-card">
                  <div class="inputLabel">
                    <b>
                      <div class="inputLabel">
                        <span [translate]="'Profile'"></span>
                      </div>
                    </b>
                    <hr>
                  </div>
                  <div *ngIf="!isFormReady">
                    <loading [loadingMessage]="''" [loadingSize]="'large'"></loading>
                  </div>
                  <div *ngIf="isFormReady">
                    <tracker-registration-form [(errorOrWarningMessage)]="errorOrWarningMessage" [(hiddenSections)]="hiddenSections"
                      [(hiddenFields)]="hiddenFields" [formLayout]="formLayout" [dataObject]="dataObject"
                      [dataUpdateStatus]="dataUpdateStatus$ | async" [currentUser]="currentUser"
                      [(trackedEntityAttributesSavingStatusClass)]="trackedEntityAttributesSavingStatusClass"
                      [trackerRegistrationForm]="trackerRegistrationForm" [programTrackedEntityAttributes]="programTrackedEntityAttributes"
                      (onChange)="updateData($event)"></tracker-registration-form>
                    <ion-row no-padding no-margin>
                      <ion-col>
                        <div float-left>
                          <div class="item-card" color="font-color" (click)="goBack()" padding ion-button clear
                            text-center text-capitalize>
                            <ion-icon name="ios-arrow-back-outline"></ion-icon>&nbsp;&nbsp;
                            <span [translate]="'Back'"></span>
                          </div>
                        </div>
                        <div float-right>
                          <div class="item-card" color="font-color" padding ion-button clear text-center
                            text-capitalize (click)="addNewTrackedEntity()">
                            <img class="footer-icon" [src]="icons.addNewCase" />&nbsp;&nbsp;
                            <span [translate]="'Add new'"></span>
                          </div>
                          <div class="item-card" color="danger" (click)="deleteTrackedEntity(trackedEntityInstance)"
                            padding ion-button clear text-center text-capitalize>
                            <ion-icon name="trash"></ion-icon>&nbsp;&nbsp;
                            <span color="font-color" [translate]="'Delete'"></span>
                          </div>
                        </div>
                      </ion-col>
                    </ion-row>
                  </div>

                </div>

                <div *ngIf="isTrackedEntityRegistered" class="item-card-program-stage-section">
                  <div class="item-card" color="font-color" (click)="updateWidgetPagination(currentWidgetIndex + 1)"
                    padding-top padding-bottom ion-button clear text-center text-capitalize>
                    <span [translate]="'Next'"></span>&nbsp;&nbsp;
                    <ion-icon name="ios-arrow-forward-outline"></ion-icon>
                  </div>
                </div>
              </div>

              <div *ngIf="currentWidget.id != 'enrollment'">
                <div *ngIf="programStages && programStages.length > 0">
                  <div *ngFor="let programStage of programStages;trackBy: trackByFn">
                    <div *ngIf="widget.id == programStage.id">
                      <program-stage-tracker-based [programSkipLogicMetadata]="programSkipLogicMetadata" [formLayout]="formLayout"
                        [programStage]="programStage" [trackedEntityInstance]="trackedEntityInstance"
                        [currentWidgetIndex]="currentWidgetIndex" [isLastStage]="(currentWidgetIndex == programStages.length)"
                        (onChange)="updateWidgetPagination($event)"></program-stage-tracker-based>
                    </div>
                  </div>
                </div>
              </div>
            </ion-col>
          </ion-row>
        </div>
      </div>
    </div>
  </ion-grid>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <ion-grid>
      <ion-row>
        <ion-col>
          <button padding ion-button clear text-capitalize *ngFor="let widget of dashboardWidgets;trackBy: trackByFn"
            [disabled]="(!isTrackedEntityRegistered && widget.iconName) || (isDashboardWidgetOpen[widget.id])" (tap)="changeDashboardWidget(widget)">
            <div [ngClass]=" (isDashboardWidgetOpen[widget.id])?'program-stage-button-label':''">
              <div *ngIf="widget.icon">
                <img class="footer-icon" [src]="widget.icon" />
              </div>
              <div *ngIf="widget.iconName">
                <b>{{ widget.iconName }}</b>
              </div>
            </div>
          </button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-footer>
